<template>
	<div style="margin-right: 30px;">
		<el-form 
		label-width="140px"
		:rules="rules"  
		ref="formObj" 
		:model="payform">
			 <el-form-item label="密码(同登录密码)" prop="password">
				  <el-input v-model="payform.password" style="width: 240px" type="password" placeholder="请输入您的密码"
				     show-password clearable />
			 </el-form-item>
			 <div style="margin-left: 30px;">
			 	缴费金额：￥50
			 	</div>
			 	<br/>
			 <div style="margin-left: 30px;">
			 	包含：绿化养护、清洁卫生、秩序维护、公共设施日常维护、办公费用等经业主同意的费用
			 </div>
			 <br/>
			 <el-form-item>
			    <el-button type="primary" @click="save()" plain>确认支付</el-button>
			    <el-button type="danger" @click="reset()" plain>重置</el-button>
			  </el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { get, post } from '@/plugins/axios'
import { reactive, ref } from 'vue'
import { getCookieForObject, setCookiesFromObject } from '@/util';
import{_axios} from '@/plugins/axios'
import {ElMessageBox}from'element-plus'
import { ElForm, ElMessage } from 'element-plus';
import router from'@/router/index'
const payamount=ref(50)
const props = defineProps(['id'])
const formObj = ref()
const amount=ref(0)
const tel=ref('')
const newmoney=ref(0)
const emits = defineEmits(['update:show', 'getTableData'])
const userId=getUserId()
const payif=ref(0)
const payform=reactive({
	name:'',
	password:''
})
const handleRecharge = () => {
    newmoney.value=Number(amount.value) - Number(payamount.value)
    console.dir("运算结果"+newmoney.value)
};
function getUserId(){
	const userinfo= getCookieForObject('user')
	return userinfo.id
}
init()
function init(){
    const user=getCookieForObject('user')
    amount.value=user.account
	tel.value=user.phone
}

function save()
{
	//表单合理就处理看余额够不够，够就继续，不够就跳转到充值页面，
	handleRecharge()
	if(newmoney.value<0){
		ElMessageBox.confirm(
			'您的账户余额不足，是否跳转到充值部分？',
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning'
			}
			).then(() => {
			// 如果用户确认，跳转到充值页面
			router.push({ name: 'Recharge-Transfer' });
			});
		return
	}
	else{
		post('/tUser/paycheck',{id: userId,password:payform.password ,paymoney: payamount.value},res=>{
			console.dir(res)
			if(res){
				const user=getCookieForObject('user')
				emits('update:show',false)
				user.account=newmoney.value
				setCookiesFromObject('user',user)
				location.reload()
				ElMessage.success('物业费支付成功')
				const formData=new FormData()
				for(const key in payform){
					formData.append(key,payform[key])
				}
				formData.append('userId',userId)
				_axios.request({
					url:'/propertyFee/add',
					method:'post',
					data:formData
				}).then(response=>{
					console.dir((response))
					emits('update:show',false)
					emits('getTableData')
				})
			}
		},formObj)
	}
}
function reset()
{
	payform.name='',
	payform.password=''
}
const rules = reactive({
	password:[
		{ required: true, message: '请输入您的密码', trigger: 'blur' },
	]
})
</script>

<style scoped lang="scss">
</style>